<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>指标数据填报表（仿 antd 风格，无按钮）</title>
    <style>
        body {
            font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Arial", sans-serif;
            background: #f5f5f5;
            padding: 24px;
        }
        .ant-table-wrapper {
            background: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.09);
            border-radius: 6px;
            padding: 20px;
            margin: auto;
            max-width: 100vw;
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            background: #fff;
            border-radius: 4px 4px 0 0;
            overflow: hidden;
            min-width: 1400px;
        }
        th, td {
            border: 1px solid #f0f0f0;
            padding: 7px 8px;
            text-align: center;
            vertical-align: middle;
            min-width: 60px;
        }
        th {
            background: #fafafa;
            color: #262626;
            font-weight: 500;
            border-bottom: 2px solid #e9e9e9;
            white-space: pre-line;
        }
        .ant-input-number {
            width: 40px;
            height: 32px;
            border: 1px solid #d9d9d9;
            background: #fff;
            border-radius: 6px;
            text-align: center;
            outline: none;
            font-size: 16px;
            transition: border 0.2s;
            box-sizing: border-box;
        }
        .ant-input-number:focus {
            border: 1.5px solid #40a9ff;
        }
        td.sum, th.sum {
            min-width: 70px;
        }
        td.sticky, th.sticky {
            position: sticky;
            left: 0;
            background: #fff;
            z-index: 1;
        }
        th.sticky2, td.sticky2 {
            position: sticky;
            left: 70px;
            background: #fff;
            z-index: 1;
        }
        @media (max-width: 768px) {
            .ant-table-wrapper {
                padding: 5px;
            }
            th, td {
                min-width: 80px;
                font-size: 12px;
                padding: 4px 2px;
            }
        }
    </style>
</head>
<body>
<div class="ant-table-wrapper">
    <table>
        <thead>
        <tr>
            <th class="sticky" rowspan="2">指标名称</th>
            <th class="sticky2" rowspan="2">计量单位</th>
            <th>房地产市场</th>
            <th>住房保障</th>
            <th>住房公积金</th>
            <th>建筑市场</th>
            <th>工程质量安全</th>
            <th>建设工程消防设计</th>
            <th>市政公用</th>
            <th>市容环卫</th>
            <th>建筑垃圾</th>
            <th>园林绿化</th>
            <th>喷青污染</th>
            <th>建筑施工扬尘污染</th>
            <th>餐饮油烟污染</th>
            <th>露天焚烧污染</th>
            <th>烟花爆竹污染</th>
            <th>车辆乱停乱放</th>
            <th>占道经营</th>
            <th>其他</th>
            <th class="sum" rowspan="2">合计</th>
        </tr>
        </thead>
        <tbody>
        <!-- 警告 -->
        <tr>
            <td class="sticky">警告</td>
            <td class="sticky2">件</td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td class="sum"></td>
        </tr>
        <!-- 罚款 -->
        <tr>
            <td class="sticky">罚款</td>
            <td class="sticky2">件</td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td class="sum"></td>
        </tr>
        <!-- 罚款金额 -->
        <tr>
            <td class="sticky">罚款金额</td>
            <td class="sticky2">元</td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td><input class="ant-input-number" type="number"></td>
            <td class="sum"></td>
        </tr>
        <!-- 更多行可继续复制粘贴 -->
        </tbody>
    </table>
    <p style="color: #888; margin-top: 16px;">仿 antd-vue 可编辑表格，仅为示例，行内容和交互可继续拓展</p>
</div>
</body>
</html>
